<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue基础语法</title>
    <style>
        .red{background:red}
        .green{background: green}
    </style>
    <script src="js/vue.js"></script>
</head>
<body>
    <!--View视图-->
    <div id="app">
        <!--{{绑定数据}}-->
        <p>姓名:{{person.name}}</p>
        <p>年龄:{{person.age}}</p>
        <p>性别:{{person.gender}}</p>
        <!--if-else标签会删除不符合条件的标签-->
        <p v-if="person.age >= 18">{{name}}是成年人</p>
        <p v-else>{{name}}是未成年人</p>
        <hr>
        <!--v-show控制display样式实现隐藏和显示-->
        <p v-show="person.age >= 18">{{name}}是成年人</p>
        <p v-show="person.age < 18">{{name}}是未成年人</p>
        <!--v-model双向绑定-->
        <input name="name" type="text" v-model="person.name"><br>
        <input name="age" type="text" v-model="person.age"><br>
        <input name="gender" type="text" v-model="person.gender"><br>
        <!--v-on:事件 = "函数名"-->
        <button v-on:click="savePerson">保存</button>
        <!--v-for循环遍历数组-->
        <table border="1px" width="200px">
            <tr><th>姓名</th><th>年龄</th><th>性别</th></tr>
            <!--v-bind可以绑定任意属性，在属性值中使用动态数据-->
            <tr v-for="per in persons" v-bind:class="per.gender=='男'?'red':'green'">
                <td>{{per.name}}</td>
                <td>{{per.age}}</td>
                <td>{{per.gender}}</td>
            </tr>
        </table>
    </div>
    <script>
        //创建Vue对象 ViewModel
        new Vue({
            el:"#app", //表达式设置根标签的id
            data:{     //数据 Model
                person: {
                    "name": "张三三",
                    "age": 23,
                    "gender": "男"
                },
                persons:[
                    {"name": "李四","age":20,"gender":"女"},
                    {"name": "王五","age":21,"gender":"男"},
                    {"name": "赵六","age":22,"gender":"女"},
                    {"name": "周七","age":23,"gender":"男"}
                ]
            },
            methods:{   //事件方法
                savePerson:function(){
                    //将文本框中的人信息添加到数组中，对象进行深克隆，--> json字符串 ---> json对象
                    this.persons.push(JSON.parse(JSON.stringify(this.person)));
                }
            }
        });
    </script>
</body>
</html>
